<script setup lang="ts">
import { ref } from 'vue'

defineProps<{ msg: string }>()

let count = 0
const arr= ref<number[]>([])
for(; count < 5; count++) {
  arr.value.push(count)
}

function run() {
  arr.value.shift()
  arr.value.push(count++)
  setTimeout(() => {
    run()
  }, 2000)
}

setTimeout(() => {
  run()
}, 2000)

</script>

<template>
  <div >
    <transition-group
      class="trs-wrap"
      name="list-complete"
      tag="div" 
    >
      <div class="list-complete-item" v-for="(i) in arr" :key="i">{{i}}</div>
    </transition-group>
  </div>
</template>

<style>
.list-complete-item {
  display: inline-block;
  /* width: 50px; */
  text-align: center;
  border-radius: 4px;
  border: 1px solid #42b983;
  margin-right: 4px;
  transition: all 0.8s ease;
  padding-left: 10px;
  padding-right: 10px;
}

.list-complete-enter-from,
.list-complete-leave-to {
  opacity: 0;
}

.list-complete-enter-from {
  transform: translateX(100%);
}

.list-complete-leave-to {
  transform: translate(-100%);
}
.list-complete-leave-active {
  position: absolute;
}
</style>
